<template>
  <div class="feedback disposal">
<!--    <h3 class="title fix">
      <span class="back" @click="back"></span>处置结果
    </h3> -->
    <div class="mou_gary">
      <div class="feedInner">
        <p class="feedback-tit">处置状态</p>
        <ul class="warn_type">
          <li class="on">{{getstate()}}</li>
        </ul>
        <ul class="feedInfor">
          <li>
            <span>处置时间</span>
            <span class="iconfont">{{alarmDealType.disposetime}}</span>
          </li>
        </ul>
        <div class="item">
          <label>处置情况</label>
          <textarea class="textarea" id="areaId" disabled="false" v-model="alarmDealType.item"/>
        </div>
        <!-- <div class="item">
          <label>上传照片</label>
          <div class="grid-images">
          <div v-for="(item, index) in alarmDealType.urls" :key="index">
            <div class="icon-po" @click="preview(index)">
              <img class="image" :src="getimage(item)" />
            </div>
          </div>
        </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import config from "../http/config";
import appapi from "@/common/appapi.js";
export default {
  data() {
    return {
      alarmDealType:{}
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
     getstate() {
      let type=this.alarmDealType.dealType
      let content = "";
      if (type == 1) {
        content = "未处置";
      }
      if (type == 2) {
        content = "处置中";
      }
      if (type == 3) {
        content = "已处置";
      }
      return content;
    },
    preview(index){
      let url=config.baseUrl+this.alarmDealType.urls[index]
      let urls=[];
      urls.push(url);
      console.log(url);
      console.log(urls)
      appapi.previewImage(url,urls)
    },
    getimage(item){
      let path=config.baseUrl+item
     return path;
    }
  },

 mounted() {
      let _this = this;
       _this.alarmDealType = _this.$route.query.info.alarmDealType
	   debugger
      window["dsBridge"].register("GoBack", function() {
        _this.$router.go(-1);
      });
      window["dsBridge"].register("whetherHtml", function(ret) {
        console.log("=======ret:" + ret);
        return true;
      });
      const textarea = document.getElementById("areaId");
      textarea.style.height = `${this.alarmDealType.item.length*0.5}px`;
    }
  }
</script>

<style scoped lang="stylus">
.feedInner {
  background: #ffffff;
  padding: 0 0.3rem;
}

.disposal {
  display: flex;
  flex-direction: column;
}

.feedback-tit {
  color: #979ea0;
  font-size: 0.24rem;
  line-height: 0.77rem;
}

.warn_type {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.2rem;

  li {
    flex: 1;
    height: 0.6rem;
    line-height: 0.6rem;
    background: #f1f1f1;
    text-align: center;
    border-radius: 0.08rem;
    margin-right: 0.24rem;

    &.on {
      background: #428ee4;
      color: #fff;
      box-shadow: 1px 2px 6px 1px rgba(66, 142, 228, 0.4);
    }
  }
}

.feedInfor {
  li {
    height: 1.44rem;
    line-height: 1.44rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: #dde0e4 1px solid;

    &:last-child {
      border: 0;
    }

    b {
      color: #666666;
      font-weight: normal;
    }
  }
}

.disposal_time {
  width: 50%;
  height: 100%;
  border: 0;
}

.textarea {
  width: 100%;
  display: block;
  height: fit-content;
  min-height:1.18rem;
  border: #dde0e4 1px solid;
  border-radius: 3px;
  padding: 0.1rem;
  box-sizing: border-box;
}

.item {
  margin-top: 0.2rem;

  label {
    font-size: 0.3rem;
    margin-bottom: 0.27rem;
    display: block;
  }
}


.grid-images {
  margin-top :0.5rem;
  padding: 0 0.1rem;
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 33% 33% 33%;
  grid-row-gap: 0.5rem;
  grid-column-gap: 0.1rem;
  align-items: center;
  justify-content: center;
 .image {
    width: 1.78rem;
    height: 1.78rem;
  }

  .icon-po {
    flex: 1;
    position: relative;
  }
}
</style>
